#home {
  height: auto;
  gap: 5vmin;
  width: 100%;
  padding: 5%;
  background: var(--onBg);
  --rx2: calc(var(--roundness)*1.5);

  select {
    font-size: 0.8rem;
    border-radius: 0;
  }

  svg,
  [aria-label] {
    cursor: pointer;
  }

  #upperLayer {
    width: 100%;
    position: relative;

    img {
      border: var(--border);
      border-radius: var(--roundness);
    }

    #meta {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      #title {
        font-size: 1.2rem;
        font-weight: bold;
      }

      #upperButtonLayer {
        margin-top: 5vmin;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        * {
          font-size: 1.4rem;
          line-height: 1.4rem;
          margin: 0;
          padding: 0;
        }

        #favButton {
          display: none;

          &+label {
            text-align: right;
            font-size: x-large;
          }

          &:checked+label {
            animation: like 0.4s ease-in-out;
          }
        }

        #loopButton {
          transition: transform 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
        }

        #loopButton.on {
          padding: 0.2rem;
          font-size: 1rem;
          line-height: 1rem;
          background: var(--text);
          color: var(--bg);
          border-radius: var(--roundness);
          transform: rotate(180deg);
        }

      }
    }

  }

  #trackline {
    width: 100%;

    input {
      width: 100%;
    }

    div {
      display: flex;
      justify-content: space-between;
    }

  }


  #playerControls {
    width: 100%;
    display: flex;
    justify-content: space-between;

    button {
      font-size: 1.6rem;
      color: var(--text);
      padding: 0;
    }

    #playButton {
      transform: scale(1.5)
    }
  }

  #playerFooter {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;


    p {
      font-size: 0.9rem;
      font-style: italic;
      text-align: center;
      font-weight: 700;
      margin-left: -3ch;
      opacity: 0.5;
    }

  }

  @media(orientation:portrait) {
    margin-top: auto;
    border-radius: var(--rx2) var(--rx2) 0 0;
    border-top: var(--border);
    flex-direction: column;
    animation-name: fromBelow;

    img {
      width: 50dvh;
      margin: auto;
    }

    #meta {
      margin-top: 5%;
    }

    #volumeContainer input {
      display: none;
    }
  }

  @media(orientation:landscape) {
    width: 100%;
    margin: auto;
    border: var(--border);
    border-radius: var(--rx2);
    padding: 4vmin 8vmin;
    animation-name: fromLeft;

    /* button hover info */
    [aria-label]:hover::after {
      position: fixed;
      content: attr(aria-label);
      font-size: small;
      font-family: inherit;
    }

    #upperLayer {
      display: flex;
      justify-content: center;

      img {
        margin: auto;
        max-height: 7rem;
        width: auto;
      }

      #meta {
        width: 62%;

        #upperButtonLayer {
          #volumeContainer {
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
              margin-left: 5%;

              &::-webkit-slider-thumb {
                background-color: transparent;
              }
            }
          }
        }
      }
    }
  }

}




/* === range theme and appearance === */
input[type="range"] {
  font-size: 1.5rem;
  color: var(--bg);
  filter: invert();
  --thumb-height: 0.625em;
  --track-height: 0.125em;
  --track-color: var(--onBg);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  /* === range commons === */
  position: relative;
  background: #fff0;
  overflow: hidden;
}


input[type="range"]:active {
  cursor: grabbing;
}


/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));

  filter: brightness(100%);
  clip-path: polygon(100% -1px,
      var(--clip-edges) -1px,
      0 var(--clip-top),
      -100vmax var(--clip-top),
      -100vmax var(--clip-bottom),
      0 var(--clip-bottom),
      var(--clip-edges) 100%,
      var(--clip-further) var(--clip-further));
}

input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  background: #fff0;
}

input[type="range"]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}